<template>
  <div class="dialog">
    <el-dialog width="60%" :title="title" :visible="true" :close-on-click-modal="false" :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="disabled">
        <el-form-item label="广告标题：" prop="title">
          <el-input v-model="form.title" placeholder="请输入" clearable :disabled="disabled" />
        </el-form-item>
        <el-form-item label="投放类型：" prop="deliveryType">
          <el-radio-group v-model="form.deliveryType">
            <el-radio :label="0">自定义推荐</el-radio>
            <!--              <el-radio :label="1">产品推荐</el-radio>-->
            <!--              <el-radio :label="2">活动推荐</el-radio>-->
            <!--              <el-radio :label="3">抽奖推荐</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告图片：" prop="imgUrl">
          <UploadFile :file-list="form.imgUrl" @change="uploadHandle($event, 'imgUrl')" />
        </el-form-item>
        <el-form-item label="永久有效：" prop="isForever">
          <el-switch v-model="form.isForever" active-text="是" inactive-text="否" :inactive-value="0" :active-value="1" />
        </el-form-item>
        <el-form-item v-if="form.isForever ===0" label="投放时间：" prop="dateRange">
          <el-date-picker
            v-model="form.dateRange"
            :disabled="form.isForever === 1"
            class="el-time-range"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>

        <el-form-item label="投放位置：" prop="deliveryAddressList">
          <el-checkbox-group v-model="form.deliveryAddressList" clearable>
            <div>
              <el-checkbox :label="6">首页</el-checkbox>
            </div>
            <span class="select-title">弹窗频率</span>
            <el-select v-model="form.frequencyType1" clearable>
              <el-option value="1" label="每进入一次应用的该页面展示一次" />
              <el-option value="2" label="有效时间内该页面只展示一次" />
              <el-option value="3" label="每进入该页面一天只展示一次" />
            </el-select>
            <div>
              <el-checkbox :label="7">游记</el-checkbox>
            </div>
            <span class="select-title">弹窗频率</span>
            <el-select v-model="form.frequencyType2" clearable>
              <el-option value="1" label="每进入一次应用的该页面展示一次" />
              <el-option value="2" label="有效时间内该页面只展示一次" />
              <el-option value="3" label="每进入该页面一天只展示一次" />
            </el-select>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">立即发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile/index.vue'
import { createPop, getPopDetail } from '@/api/advert'
export default {
  name: 'AddPop',
  components: {
    UploadFile
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },

  data() {
    const validateDeliveryAddressList = (rule, value, callback) => {
      if (this.form.deliveryAddressList.length === 0) {
        callback(new Error('请选择投放位置'))
      } else {
        this.form.deliveryAddressList.map(item => {
          if (item === 7 && !this.form.frequencyType2) {
            callback(new Error('请选择投放频率'))
          } else if (item === 6 && !this.form.frequencyType1) {
            callback(new Error('请选择投放频率'))
          } else {
            callback()
          }
        })
      }
    }
    return {
      loading: false,
      form: {
        title: '',
        deliveryType: '',
        imgUrl: '',
        dateRange: '',
        isForever: 0,
        deliveryAddressList: [],
        frequencyType1: '',
        frequencyType2: ''
      },
      rules: {
        title: [{ required: true, message: '请输入广告标题', trigger: ['change', 'blur'] }],
        deliveryType: [{ required: true, message: '请选择投放类型', trigger: ['change'] }],
        imgUrl: [{ required: true, message: '请上传广告图片', trigger: ['change'] }],
        dateRange: [{ required: true, message: '请选择投放时间', trigger: ['change', 'blur'] }],
        deliveryAddressList: [{ required: true, validator: validateDeliveryAddressList, trigger: ['change'] }]
      }
    }
  },

  computed: {
    title() {
      if (this.id) {
        return '广告详情'
      } else {
        return '新增广告'
      }
    },
    disabled() {
      return !!this.id
    }
  },

  created() {
    if (this.id) {
      this.getDetail()
    }
  },

  methods: {

    // 获取详情
    getDetail() {
      const data = {
        advertId: this.id
      }
      getPopDetail(data).then(res => {
        const { startTime, endTime } = res
        this.form = res
        let { deliveryAddressList } = res
        res.dateRange = [startTime, endTime]
        deliveryAddressList = deliveryAddressList.map(item => {
          if (item.deliveryAddress === 6) {
            this.form.frequencyType1 = item.frequencyDesc
          }
          if (item.deliveryAddress === 7) {
            this.form.frequencyType2 = item.frequencyDesc
          }
          return item.deliveryAddress
        })
        this.form.deliveryAddressList = deliveryAddressList
      }).catch(() => {})
    },

    // 取消
    close() {
      this.$emit('close')
    },

    // 确认
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const { dateRange, frequencyType1, frequencyType2 } = this.form
          const [startTime, endTime] = dateRange || []
          const deliveryAddressList = []
          if (frequencyType1) {
            deliveryAddressList.push({
              deliveryAddress: 6,
              frequencyType: frequencyType1
            })
          }
          if (frequencyType2) {
            deliveryAddressList.push({
              deliveryAddress: 7,
              frequencyType: frequencyType2
            })
          }
          const data = {
            ...this.form,
            startTime,
            endTime,
            deliveryAddressList
          }
          createPop(data).then(() => {
            this.$message.success('发布成功')
            this.loading = false
            this.$emit('confirm')
            this.close()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },

    // 上传图片处理
    uploadHandle(payload, name) {
      this.form[name] = payload.fileList[0]?.url
      this.$refs.form.validateField(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-time-range{
  margin-right: 10px;
}
.select-title{
  font-size: 14px;
  color: #606266;
  display: inline-block;
  margin:0 10px;
}
</style>
